<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>首页二</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
  <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
  <link rel="stylesheet" href="../css/public.css" media="all">
  <style>
    .layui-card {border:1px solid #f2f2f2;border-radius:5px;}
    .icon {margin-right:10px;color:#1aa094;}
    .icon-cray {color:#ffb800!important;}
    .icon-blue {color:#1e9fff!important;}
    .icon-tip {color:#ff5722!important;}
    .layuimini-qiuck-module {text-align:center;margin-top: 10px}
    .layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
    .layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
    .welcome-module {width:100%;height:210px;}
    .panel {background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
    .panel-body {padding:10px}
    .panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
    .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top: .3em;}
    .layui-red {color:red}
    .main_btn > p {height:40px;}
    .layui-bg-number {background-color:#F8F8F8;}
    .layuimini-notice:hover {background:#f6f6f6;}
    .layuimini-notice {padding:7px 16px;clear:both;font-size:12px !important;cursor:pointer;position:relative;transition:background 0.2s ease-in-out;}
    .layuimini-notice-title,.layuimini-notice-label {
      padding-right: 70px !important;text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;}
    .layuimini-notice-title {line-height:28px;font-size:14px;}
    .layuimini-notice-extra {position:absolute;top:50%;margin-top:-8px;right:16px;display:inline-block;height:16px;color:#999;}
    .loading-overlay {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3);z-index:9999;display:flex;justify-content:center;align-items:center;}
    .loading-content {background:white;padding:20px;border-radius:5px;text-align:center;}
  </style>
</head>
<body>

<div class="layuimini-container" id="app">
  <div class="layuimini-main">
    <!-- 服务器时间和刷新按钮 -->
    <div style="margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;">
      <div>
        <span>当前服务器时间：</span>
        <span>{{ serverTime }}</span>
      </div>
      <div>
        <button class="layui-btn layui-btn-sm" @click="refreshData" :disabled="loading">
          <i class="layui-icon layui-icon-refresh" v-if="!loading"></i>
          <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop" v-if="loading"></i>
          {{ loading ? '加载中...' : '刷新数据' }}
        </button>
      </div>
    </div>

    <!-- 统计说明 -->
    <fieldset class="table-search-fieldset">
      <legend>统计说明</legend>
      <div style="margin: 10px;">
        <ul>
          <li v-for="item in tips" :key="item">{{ item }}</li>
        </ul>
      </div>
    </fieldset>

    <!-- 项目数据 -->
    <fieldset class="table-search-fieldset">
      <legend>项目数据</legend>
      <div class="layui-row layui-col-space10">
        <div class="layui-col-md2" v-for="item in projectData" :key="item.label">
          <div class="layui-card">
            <div class="layui-card-header">{{ item.label }}</div>
            <div class="layui-card-body">{{ item.value }}</div>
          </div>
        </div>
      </div>
    </fieldset>

    <!-- 今日数据 -->
    <fieldset class="table-search-fieldset">
      <legend>今日数据</legend>
      <div class="layui-row layui-col-space10">
        <div class="layui-col-md2" v-for="item in todayData" :key="item.label">
          <div class="layui-card">
            <div class="layui-card-header">{{ item.label }}</div>
            <div class="layui-card-body">{{ item.value }}</div>
          </div>
        </div>
      </div>
    </fieldset>

    <!-- 分服数据 -->
    <fieldset class="table-search-fieldset">
      <legend>分服数据</legend>
      <table class="layui-table">
        <thead>
        <tr>
          <th v-for="col in serverColumns" :key="col">{{ col }}</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="row in serverData" :key="row.server">
          <td v-for="col in serverColumns" :key="col">{{ row[col] }}</td>
        </tr>
        </tbody>
      </table>
    </fieldset>
  </div>

  <!-- 加载遮罩层 -->
  <div v-if="loading" class="loading-overlay">
    <div class="loading-content">
      <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 24px; color: #1E9FFF;"></i>
      <div style="margin-top: 10px;">数据加载中...</div>
    </div>
  </div>
</div>
<script src="/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/common.js?v=1"></script>
<script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
  new Vue({
    el: "#app",
    data: {
      serverTime: '',
      loading: false,
      tips: [
        "实时在线玩家数量: 当前所有活跃服务器的在线玩家数量",
        "今日新增玩家: 查询当天新增注册玩家数量",
        "过去7天活跃玩家: 过去7天登录过玩家数量",
        "过去30天活跃玩家: 过去30天登录过玩家数量",
        "过去7天平均在线时长: 过去7天所有玩家累计平均在线时长",
        "今日收入: 查询当天累计充值金额",
        "付费率: 付费玩家数/活跃玩家数",
        "ARPU: 平均每用户收入=累计付费金额/累计注册玩家数量",
        "ARPPU: 平均每付费用户收入=累计付费金额/累计付费玩家数量"
      ],
      projectData: [
        { label: "运营时间[天]", value: "加载中..." },
        { label: "总注册玩家", value: "加载中..." },
        { label: "总付费[元]", value: "加载中..." },
        { label: "平均付费率", value: "加载中..." },
        { label: "平均ARPU", value: "加载中..." },
        { label: "平均ARPPU", value: "加载中..." }
      ],
      todayData: [
        { label: "实时在线玩家数据量", value: "加载中..." },
        { label: "今日新增玩家", value: "加载中..." },
        { label: "新增付费玩家", value: "加载中..." },
        { label: "ARPPU", value: "加载中..." },
        { label: "今日充值[元]", value: "加载中..." },
        { label: "付费率", value: "加载中..." },
        { label: "今日新增付费笔数", value: "加载中..." },
        { label: "ARPU", value: "加载中..." }
      ],
      serverColumns: [
        "服务器", "开服时间", "开服天数", "总玩家数", "付费总量", "今日新增玩家", "今日付费人数","总付费玩家", "新增付费玩家", "今日付费笔数", "付费率", "ARPU", "ARPPU"
      ],
      serverData: []
    },
    mounted() {
      this.updateTime();
      setInterval(this.updateTime, 1000);

      // 加载数据
      this.loadDashboardData();

      // 如果你需要用layui的table等功能，可以在这里初始化
      layui.use(['layer', 'miniTab', 'echarts'], function () {
        var miniTab = layui.miniTab;
        miniTab.listen();
        // 你可以在这里写layui相关的js
      });
    },
    methods: {
      updateTime() {
        // 这里可以用后端接口获取服务器时间，暂时用本地时间
        const now = new Date();
        this.serverTime = now.getFullYear() + '-' +
                (now.getMonth() + 1).toString().padStart(2, '0') + '-' +
                now.getDate().toString().padStart(2, '0') + ' ' +
                now.getHours().toString().padStart(2, '0') + ':' +
                now.getMinutes().toString().padStart(2, '0') + ':' +
                now.getSeconds().toString().padStart(2, '0');
      },

      // 加载总览数据
      loadDashboardData() {
        this.loading = true;
        const self = this;

        $.get("/admin/customer/init", {page: 1, limit: 9999}, function(res) {
          self.loading = false;

          if (res.code === 0 && res.data) {
            // 更新项目数据
            if (res.data.projectData) {
              self.projectData = res.data.projectData;
            }

            // 更新今日数据
            if (res.data.todayData) {
              self.todayData = res.data.todayData;
            }

            // 更新分服数据
            if (res.data.serverData) {
              self.serverData = res.data.serverData;
            }
          } else {
            console.error('数据加载失败:', res);
            self.showError('数据加载失败，请稍后重试');
          }
        }).fail(function(xhr, status, error) {
          self.loading = false;
          console.error('请求失败:', error);
          self.showError('网络请求失败，请检查网络连接');
        });
      },

      // 显示错误信息
      showError(message) {
        // 使用layui的layer组件显示错误信息
        if (typeof layui !== 'undefined' && layui.layer) {
          layui.layer.msg(message, {icon: 2});
        } else {
          alert(message);
        }
      },

      // 刷新数据
      refreshData() {
        this.loadDashboardData();
      }
    }
  });
</script>
</body>
</html>
